import React, { useState, useEffect, useRef } from 'react'
import axios from 'axios'
import { useNavigate, Outlet, useSearchParams } from 'react-router-dom'
import './person.css'
import { Cell, Button } from 'react-vant';
import { useSelector } from 'react-redux'
const List = (props) => {
    const [perfalse, setPerfalse] = useState(false)
    const [params] = useSearchParams()
    const phone = params.get('phone')
    const navigae = useNavigate()
    const [myPhone, setMyPhone] = useState('')
    const Name = useSelector((store) => store.cart.myPhone)
    const getName = () => {
        axios.get(`/System/phone?name=${Name}`).then(res => {
            setMyPhone(res.data.phone)
        })
    }
    useEffect(() => {
        getName()
    }, [])
    return (
        <div className='settings-liao'>
            <div className="order-title" style={{ background: " #f7f7f7" }}>
                <div className="t1" onClick={() => { window.history.back() }}><svg t="1730286914624" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16962" width="200" height="200"><path d="M622.927311 789.137615c-6.503881 0-13.007763-2.16796-18.066337-7.226535l-231.249118-231.249118c-10.117149-10.117149-15.898377-23.847565-15.898377-39.023289 0-14.45307 5.781228-28.183486 15.898377-39.023288l231.971771-231.971772c10.117149-10.117149 26.015526-10.117149 35.410022 0 10.117149 10.117149 10.117149 26.015526 0 35.410021l-231.249118 231.971772c-0.722653 0.722653-1.445307 2.16796-1.445307 2.890614 0 0.722653 0 2.16796 1.445307 2.890614l231.249118 231.249118c10.117149 10.117149 10.117149 26.015526 0 35.410021-5.058574 5.781228-11.562456 8.671842-18.066338 8.671842z" fill="#2c2c2c" p-id="16963"></path></svg></div>
                <div className="t2"><span>账号与安全</span></div>
                <div className="t3"></div>
            </div>
            <div className="person-body">
                <p className='person-p1'>账号设置</p>
                <Cell title='消息设置' value={myPhone} isLink onClick={() => navigae(`/Pasword?phone=${myPhone}`)} />
                <p className='person-p2'>第三方账号</p>
                <Cell title='微信' value='未绑定' isLink />
                <p className='person-p2'>安全设置</p>
                <Cell title='登录密码' value='未设置/修改' isLink onClick={() => { setPerfalse(!perfalse) }} />
                {perfalse == false ? '' : <div className="person-select" >
                    <Button size='mini' onClick={() => { navigae('/buddha') }}>设置</Button><br></br>
                    <Button size='mini' onClick={() => { navigae('/Pasword') }}>修改</Button>
                </div>}
                <Cell title='注销账号' value='请谨慎操作' isLink />
            </div>
        </div>
    )
}
export default List